<template>
  <div class="article-list content"  @scroll="handleScroll">
    <h2>法律咨询贴</h2>
    <el-card shadow="hover" v-for="article in consultations" :key="article.id" class="article-card" @click="detailFunction(article)"  >
      <div class="article-title">{{ article.title }} <span><el-tag v-for="tag in tags" :key="tag">{{ tag }}</el-tag></span></div>
      <div class="article-meta">
        <span class="date">{{ article.user.username }}<br></span>
        <el-tag v-if="article.status === 'OPEN'" type="success">{{ article.status }}</el-tag>
        <el-tag v-else="article.status === 'CLOSED'" type="danger">{{ article.status }}</el-tag>

        <span class="date">{{ article.createTime }}</span>
      </div>
    </el-card>
    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-else-if="!hasMore" class="loading">没有更多数据了</div>
    <div v-else class="loading">上拉加载更多</div>
  </div>
  <el-dialog title="法律咨询贴" v-model="detail" :fullscreen="true">
    <el-card >
      <div slot="header" class="clearfix">
        <span style="font-size: 20px; font-weight: bold">{{ form.title }}<br><el-tag  v-for="tag in tags" :key="tag">{{ tag }}</el-tag></span>
      </div>
      <div style=" font-size: 20px;font-family:'楷体';color: #000000;padding-top:40px ;padding-bottom:40px ;line-height: 30px;letter-spacing: 2px;">

        {{ form.content }}
      </div>

      <div v-for="answer in form.answers" :key="answer" style="margin-top:20px ;">
        <div class="comment" style="font-size: 20px;font-family:'宋体';color:dimgray;">

          <span v-if="answer.userId===1" style="color: black;" class="comment-author">我回复:<br></span>
          <span v-else  class="comment-author">{{ answer.user.username }}回复:<br></span>
          <span class="comment-content">{{ answer.comment }}</span>
        </div>
      </div>
      <div >
        <el-input    type="textarea" v-model="form.comment"placeholder="请输入内容" style="width: 100%;margin-top: 20px;"></el-input>
        <el-button  type="primary" @click="Tocomment(form)">回复</el-button>
      </div>
    </el-card>
  </el-dialog>
  </template>

  <script>

  export default {
    data() {
      return {
        consultations: [],
        tags: ['后端', '人工智能', '豆包Mars'],
        detail:false,
        form: {
          title: '',
          content: '',
          tags: '',
          answers:[],
          comment: '',
          consultationId: 0,
          userId:1
        },
        items: [],
        isLoading: false,
        page: 1,
        hasMore: true,// 添加一个变量来跟踪是否还有更多数据
        formLabelWidth: '120px',
      };
    },
    methods: {
      handleScroll(event) {
        const content = event.target;
        if (content.scrollTop + content.clientHeight >= content.scrollHeight - 10) {
          if (!this.isLoading && this.hasMore) {
            this.isLoading = true;
            this.page++;
            this.loadMoreData();
          }
        }
      },
      async loadMoreData() {
        try {
          // 模拟异步请求
          const newData = await this.fetchData(this.page);
          this.items = [...this.items, ...newData];
          this.isLoading = false;
          if (newData.length < 5) { // 假设每页5条数据
            this.hasMore = false;
          }
        } catch (error) {
          console.error('加载数据失败:', error);
          this.isLoading = false;
        }
      },
      async fetchData(page) {
        // 模拟API请求
        return new Promise(resolve => {
          setTimeout(() => {
            const response =  this.$axios.get('/consultation/listAll?pageNumber='+page+'&pageSize=5').then(
                (response) => {
                  console.log(response.data.data.records)
                  resolve(response.data.data.records);
                }
            );


          }, 1500);
        });
      },
      Tocomment(form) {
        console.log(form);
        this.$axios.post('/consultation/comment', form
        ).then((response) => {
          this.$message.success('回复成功');
          this.getConsultations();
          this.detail = false;
        })
            .catch((error) => {
              this.$message.error('回复失败');
            });
        form.comment='';
      },
      detailFunction(article) {
        this.form.consultationId = article.id;
        this.form.title = article.title;
        this.form.content = article.content;
        this.form.tags = article.tags;
        this.form.answers = article.answers;
        this.detail = true;
      },
      async getConsultations() {
        const response = await this.$axios.get('/consultation/listAl');
        this.consultations = response.data.data;
      },
    },
    mounted() {
      this.getConsultations();
        this.loadMoreData();
    }
  };
  </script>

  <style scoped>
  .article-list {
    margin-top: 20px;
  }

  .article-card {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
  }
  .article-card :hover {
    cursor: pointer;
  }

  .article-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .article-meta {
    font-size: 14px;
    color: #606266;
  }

  .author {
    margin-right: 10px;
  }
  .loading {
    text-align: center;
    padding: 20px 0;
    color: #666;
  }
  </style>